<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div class="scene-public-drugstore" :style="getStyle('area')">
      <div class="drugstore-inside">
        <div class="drugstore-queue">
          <div class="drugstore-item" v-for="(item,index) in optionsInfo['headerInfo']['content']">
            <div class="header" :style="getStyle('header')">
              <ScrollX>{{ item.value }}</ScrollX>
            </div>
            <div class="list-wrap">
              <vue-seamless-scroll
                  class="scroll"
                  ref="scroll"
                  :key="widgetKey"
                  :classOption="scrollPatientOption(index+1)"
                  :data="getCleanPatientListInfo(index+1,'original')"
              >
                <div class="first-group"
                     :style="getStyle('firstGroup')"
                     v-for="(patientItem,patientKey) in  getCleanPatientListInfo(index+1,'clean')"
                     :key="patientKey"
                >
                  <div
                      class="item"
                      :style="getStyle('listItem')"
                      v-for="(item,key) in patientItem"
                      :key="key"
                  >
                    {{ item?.patientName || '\u00a0' }}
                  </div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from "uuid";
import {pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";

export default {
  name: "scene-public-drugstore-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
    }
  },

  computed: {
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid()
      }
    },

    // 就诊患者滚动
    scrollPatientOption() {
      return function (status) {
        let {
          scroll = true,
          scrollStep = 1,
          scrollNumber = 6,
          viewNumber = 4,
          patientListCol,
          patientListTotal,
        } = this.optionsInfo;
        let list = this.getPatientListolInfo;
        let filterInfo = this.$lodash.filter(list, list => parseInt(list.status) === parseInt(status));
        let chunkList = this.$lodash.chunk(filterInfo, patientListCol)
        let scrollState = scroll && (chunkList?.length) > 6 && (chunkList?.length) > scrollNumber;
        return {
          hoverStop: true,
          direction: 1,                              // 0向下 1向上 2向左 3向右
          isSingleRemUnit: true,
          step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
          limitMoveNum: scrollState ? scrollNumber : 99999 // 开始无缝滚动的数据量 this.dataList.length
        }
      }
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Object();
        let Obj = Object();
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            Reflect.set(Obj, "marginTop", pxToVw(info.marginTop));
            return Obj;
          case "firstGroup":
            // (高度 - 头部高度 / 视图展示的个数) - 外边距顶部
            let numbr = ((info.areaHeight - 120) / 6) - 6;
            Reflect.set(Obj, "height", pxToVw(numbr));
            Reflect.set(Obj, "lineHeight", pxToVw(numbr));
            return Obj;
          case "header":
            let headerInfo = (info.headerInfo);
            Reflect.set(Obj, "color", (headerInfo?.color));
            Reflect.set(Obj, "fontSize", pxToVw(headerInfo?.fontSize));
            Reflect.set(Obj, "fontWeight", (headerInfo?.fontWeight));
            Reflect.set(Obj, "background", (headerInfo?.background));
            return Obj;
          case "listItem":
            let listInfo = (info.listInfo);
            Reflect.set(Obj, "color", (listInfo?.color));
            Reflect.set(Obj, "fontSize", pxToVw(listInfo?.fontSize));
            Reflect.set(Obj, "fontWeight", (listInfo?.fontWeight));
            Reflect.set(Obj, "background", (listInfo?.background));
            return Obj;
        }
      };
    },

    //获取患者信息--原始数据
    getPatientListolInfo() {
      let devType = (this.devType);
      let patientListInfo = this.$store.getters['getPublishDrugstorePatientListInfo'];
      return devType ? patientListInfo['apiData'] : patientListInfo['mockData'];
    },

    //获取患者信息--区分不同类型
    getCleanPatientListInfo() {
      return function (status, type = 'clean') {
        let list = this.getPatientListolInfo;
        let {patientListTotal, patientListCol} = this.optionsInfo;
        const filterInfo = this.$lodash.filter(list, list => parseInt(list.status) === parseInt(status));
        if (type === 'clean') {
          if (filterInfo?.length >= patientListTotal) {
            return this.$lodash.chunk(filterInfo, patientListCol)
          } else {
            let fillArr = (new Array(patientListTotal - (filterInfo?.length || 0)).fill({}));
            let mergeArr = [...filterInfo, ...fillArr];
            return this.$lodash.chunk(mergeArr, patientListCol)
          }
        } else {
          return this.$lodash.chunk(filterInfo, patientListCol)
        }
      }
    },
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "publishListInfo":
          let publicListInfo = this.$lodash.cloneDeep(data);
          await this.$store.dispatch('setPublishDrugstorePatientListInfo', publicListInfo)
          break
      }
    }
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = (val.options.config);
        this.widgetKey = uuid();
        this.optionsInfo = (val.options[key]);
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-public-drugstore {
  color: #333;
  height: 100%;
  padding: 0 26px 0 26px;
  box-sizing: border-box;
  background-color: transparent;

  .drugstore-inside {
    height: calc(100%);

    .drugstore-queue {
      height: 100%;
      display: flex;
      flex-shrink: 0;
      flex-grow: 1;
      justify-content: space-between;
      flex-direction: row;

      > :nth-child(2) {
        margin: 0 30px;
        box-sizing: border-box;
      }

      .drugstore-item {
        width: calc((100% - 60px) / 3);
        flex-shrink: 0;
        flex-grow: 1;
        border-radius: 16px;
        overflow: hidden;
        background: white;
        display: flex;
        flex-direction: column;

        .header {
          width: 100%;
          height: 120px;
          background: #0059B3;
          align-content: center;
          text-align: center;
          font-size: 50px;
          color: #FFFFFF;
          padding: 0 24px;
          box-sizing: border-box;
        }

        .list-wrap {
          background: #E5EAEF;
          overflow: hidden;
          height: calc(100% - 120px);

          .first-group {
            background: white;
            display: flex;
            flex-direction: row;
            margin-top: 6px;
            box-sizing: border-box;

            .item {
              width: calc(100% / 3);
              font-size: 50px;
              justify-content: center;
              text-align: center;
              overflow: hidden;
              @include singleEllipsis(calc(100% / 3));
              color: #333333;
            }
          }
        }
      }

      .wait-patient {
        margin: 0 30px;
        box-sizing: border-box;
      }
    }
  }
}
</style>